import React from 'react';

import Illustration from '@/assets/images/profile/Illustration.png';
import { ModalContext } from '@/shared/context/ModalContext';
import { Modals } from '@/shared/interfaces';
import { Modal, Title } from '@/shared/ui';
import Image from 'next/image';

import { PremiumBox } from '../PremiumBox';
import cs from './PremiumWelcome.module.scss';

export const PremiumWelcome = () => {
  const { openModal, setData, id } = React.useContext(ModalContext);

  const openModalWithHistory = () => {
    openModal(Modals.AdvantagesModal);
    setData(() => ({ id }));
  };

  return (
    <Modal containerClassName={cs.modal} isMobile isOpen shouldCloseOnEsc>
      <Image alt="companyName" className={cs.img} placeholder="blur" priority quality={100} src={Illustration} />
      <section>
        <Title size="modal-size">Добро пожаловать в Премиум!</Title>
        <Title size="xs" tag="p">
          Теперь вы можете пользоваться всеми функциями приложения
        </Title>
        <PremiumBox onClick={() => openModalWithHistory()} />
      </section>
    </Modal>
  );
};
